<template>
	<view class="works">
		<view class="fixedTop">
			<!-- #ifdef MP-WEIXIN -->
			<u-status-bar></u-status-bar>
			<!-- #endif -->
			<view class="searchBar">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon19.png" mode="scaleToFill">
				</image>
				<input class="inp" placeholder="请输入作品名称" border="none" v-model="parameter.title"
					@confirm="confirm"></input>
				<!-- <view class="btn" @click="confirm">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon3.png"
						mode="scaleToFill"></image>
				</view> -->
			</view>
		</view>

		<view class="back-img">
			<image
				:src="userData.back_img || `https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/spaceBack.png`"
				mode="aspectFill"></image>
		</view>

		<view class="info">
			<view class="avatar">
				<image :src="userData.avatar" mode="scaleToFill"></image>
			</view>
			<view class="name">
				<text>{{userData.nickname}}</text>
				<!-- #ifdef H5 -->
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon18.png"
					mode="scaleToFill" @click="share"></image>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<button class="btn" open-type="share">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon18.png"
						mode="scaleToFill"></image>
				</button>
				<!-- #endif -->
			</view>
			<view class="yins">
				<view v-if="userData.age || userData.gender" class="item">
					<u-icon v-if="userData.gender == 1" name="man" color="#377dff" size="14" bold></u-icon>
					<u-icon v-if="userData.gender == 2" name="woman" color="#ff52e8" size="14" bold></u-icon>
					<text>{{userData.age}}岁</text>
					<!-- <text>{{userData.age}}</text> -->
				</view>
				<view v-if="userData.province" class="item">
					{{ userData.province }}·{{ userData.city }}
					<!-- {{userData.province +"·"+ userData.city}}-->
				</view>
				<view class="item" @click="copyll">ID：{{userData.id}}
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Copy.png"
						mode="scaleToFill"></image>
				</view>
				<view class="hua">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/hua.png"
						mode="scaleToFill"></image>
					总鲜花数<text style="margin-left: 4rpx;">{{userData.get_flower | million}}</text>
				</view>
				<!-- <view class="item">
					<image style="margin: 0 4rpx 0 0;" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerB.png"
						mode="scaleToFill"></image>
					{{99 | million}}
				</view> -->
			</view>
			<view class="desc">
				<!-- 📸 记录美好，用镜头捕捉生活的美好瞬间 🍽️ 美食探店，从街头小吃到高端餐厅，为你带来最真实的试吃报告 -->
				{{userData.desc || "📸 记录美好生活🌹🌹🌹"}}
			</view>

			<view class="myData">
				<view class="item" @click="navigateTo(`/pages/works/followList?type=1`)">
					<view class="value">{{userData.follow_num | million}}</view>
					<view class="key">关注</view>
				</view>
				<view class="item" @click="navigateTo(`/pages/works/followList?type=2`)">
					<view class="value">{{userData.fans | million}}</view>
					<view class="key">粉丝</view>
				</view>
				<view class="item">
					<view class="value">{{userData.browse_num_count | million}}</view>
					<view class="key">浏览</view>
				</view>
				<view class="item">
					<view class="value">{{userData.work_num | million}}</view>
					<view class="key">作品</view>
				</view>
			</view>
		</view>

		<view v-if="WorkList.length" class="works-list">
			<view class="item" v-for="(v,i) in WorkList" :key="i"
				@click="navigateTo(`/pages/works/details?id=${v.id}`)">
				<view class="activityT">
					<u-icon v-if="v.is_in_activity" name="tags-fill" :color="v.activity_label_color" size="28"></u-icon>
				</view>
				<image class="cover-img" :src="v.image" mode="aspectFill"></image>
				<view class="msg">
					<view class="title u-line-2">
						{{v.title}}
					</view>
					<view class="state">
						<view class="left">
							瓜分奖金<text>￥{{v.reward_money}}</text>
						</view>
						<view class="right" :class="v.status == 1?'stop':v.status == 2?'no':''">
							{{v.status == 1?"已发布":v.status == 0?"待审核":"未通过"}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<nullPage v-else :fixed="false"></nullPage>

		<view class="add-works" @click="navigateTo('/pages/works/addWorks')">
			<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/addWorksBtn.png" mode="scaleToFill">
			</image>
		</view>

		<g-tab-bar :select="1"></g-tab-bar>
	</view>
</template>

<script>
	import nullPage from "@/components/nullPage.vue"
	export default {
		components: {
			nullPage
		},
		data() {
			return {
				parameter: {
					title: "", //true	string		口令/名称 搜索字段
					page: 1, //true	int		当前页
					size: 10, //true	int		每页多少条
				},
				WorkList: [],
				total: 0,
				userData: {}
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getUserInfo();
			}
			// console.log(getApp().globalData.WorkList);
			this.WorkList = getApp().globalData.WorkList
			if (!this.WorkList.length) {
				this.WorkList = []
				this.total = 0
				this.parameter.page = 1
				this.myWorkList()
			}
		},
		onLoad(options) {
			if (options.referee_id) {
				uni.setStorageSync("referee_id", options.referee_id)
			}
		},
		methods: {
			share() {
				if (getApp().globalData.platform == `web`) {
					let userInfo = uni.getStorageSync("user");
					uni.setClipboardData({
						data: `${window.location.origin}${window.location.pathname}#/pages/my/my?referee_id=${userInfo.id}`,
						showToast: false,
						success: () => {
							uni.showToast({
								title: '已复制邀请链接，可发送至邀请人加入',
								duration: 2000
							})
						},
						fail: (err) => {
							console.log(err);
						}
					});
				}
			},
			// 复制id
			copyll() {
				uni.setClipboardData({
					data: this.userData.id + '',
					success: () => {},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			async getUserInfo() {
				let res = await this.$http("api/user/getUserInfo", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					uni.setStorageSync("user", res.result);
					this.userData = res.result
				}
			},
			async myWorkList() {
				let res = await this.$http("api/userWork/myWork", this.parameter, "GET")
				if (res.code == 200) {
					this.WorkList = this.WorkList.concat(res.result.data)
					getApp().globalData.WorkList = this.WorkList
					this.total = res.result.total
					// console.log(this.WorkList);
				}
			},
			confirm() {
				this.parameter.page = 1
				this.WorkList = []
				this.myWorkList()
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.confirm()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.WorkList.length >= this.total) return
			this.parameter.page += 1
			this.myWorkList()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.works {
		// // #ifdef MP-WEIXIN
		// padding: 200rpx 32rpx 185rpx;
		// // #endif
		// // #ifndef MP-WEIXIN
		// padding: 110rpx 32rpx 185rpx;
		// // #endif
		// background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/worksBack.png") no-repeat;
		// background-repeat: no-repeat;
		// background-size: 100% auto;
		padding-bottom: 185rpx;

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			// background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/worksBack.png") no-repeat;
			// background-repeat: no-repeat;
			// background-size: 100% auto;
			padding: 16rpx 32rpx 24rpx;
			box-sizing: border-box;

			.searchBar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// #ifdef MP-WEIXIN
				width: 482rpx;
				// #endif
				// #ifndef MP-WEIXIN
				width: 100%;
				// #endif
				height: 64rpx;
				// background: #FFFFFF;
				border-radius: 78rpx;
				// border: 2rpx solid #1F1F1F;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.5);

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 30rpx;
				}

				.inp {
					flex: 1;
					// margin: 0 32rpx;
					margin: 0 8rpx;
					font-weight: 500;
					font-size: 24rpx;

					.input-placeholder {
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				// .btn {
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	width: 100rpx;
				// 	height: 56rpx;
				// 	background: #1F1F1F;
				// 	border-radius: 28rpx 28rpx 28rpx 28rpx;
				// 	margin-right: 4rpx;

				// 	image {
				// 		width: 32rpx;
				// 		height: 32rpx;
				// 	}
				// }
			}
		}

		.back-img {
			image {
				display: block;
				width: 100%;
				height: 540rpx;
				background-color: #b8b8b8;
			}
		}

		.info {
			position: relative;
			// height: 376rpx;
			background: #FFFFFF;
			border-radius: 36rpx 36rpx 0rpx 0rpx;
			margin-top: -140rpx;
			padding: 0 32rpx 32rpx;

			.avatar {
				position: absolute;
				top: -80rpx;
				border: 6rpx solid #fff;
				border-radius: 50%;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.name {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0 20rpx 172rpx;
				padding-left: 172rpx;
				box-sizing: border-box;

				text {
					flex: 1;
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;
					letter-spacing: 2rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					margin-top: 6rpx;
				}
				
				::v-deep button {
					background: none;
					padding: 0;
					text-align: left;
					margin: 0;
				}
				
				::v-deep button::after {
					content: none;
				}
			}

			.yins {
				display: flex;
				align-items: center;
				padding-top: 24rpx;

				.item {
					display: flex;
					align-items: center;
					// width: 114rpx;
					height: 32rpx;
					padding: 0 12rpx;
					background: #F6F6F4;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-weight: bold;
					font-size: 20rpx;
					color: #333333;
					margin-right: 12rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 4rpx;
					}
				}
				
				.hua {
					display: flex;
					align-items: center;
					padding: 0 12rpx;
					height: 36rpx;
					background: #FF504A;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 1;
				
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 8rpx;
					}
				}
			}

			.desc {
				padding-top: 24rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 36rpx;
			}

			.myData {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-top: 30rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;

					.value {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

					.key {
						padding-top: 8rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #8D8F90;
					}
				}
			}

		}

		.works-list {
			// column-count: 2;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 18rpx;
			grid-row-gap: 20rpx;
			padding: 24rpx 32rpx;

			.item {
				// break-inside: avoid;
				// width: 334rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				// margin-bottom: 20rpx;
				position: relative;
				
				.activityT {
					position: absolute;
					top: 8rpx;
					left: 8rpx;
					z-index: 9;
					width: 40rpx;
					height: 40rpx;
				}

				.cover-img {
					display: block;
					width: 100%;
					height: 400rpx;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
				}

				.msg {
					width: 100%;

					.title {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						line-height: 36rpx;
						letter-spacing: 2rpx;
						padding: 8rpx 16rpx 4rpx;
					}

					.state {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 16rpx 12rpx;

						.left {
							font-weight: bold;
							font-size: 20rpx;
							color: #8D8F90;

							text {
								color: #FF504A;
							}
						}

						.right {
							width: 84rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #F7F7F7;
							border-radius: 88rpx 88rpx 88rpx 88rpx;
							text-align: center;
							font-weight: bold;
							font-size: 18rpx;
							color: #CACACA;
						}

						.stop {
							background: #333333;
							color: #D1FF23;
						}

						.no {
							background: #f9ae3d;
							color: #fff;
						}
					}
				}
			}

			// .page-break{
			// 	break-after: always;
			// }
		}

		.add-works {
			position: fixed;
			right: 20rpx;
			bottom: 235rpx;
			z-index: 99;
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>